<template>
  <div class="search">
    <div class="top">
      <div class="input-container">
        <input type="text" class="search-input" placeholder="输入老师|科目|年级|特点" v-model="inputVal">
      </div>
      <span class="text" v-if="!inputVal" @click="back">取消</span>
      <span class="text" v-if="inputVal" @click="search">搜索</span>
    </div>
    <div class="content">
      <p>热门搜索</p>
      <div class="hot-search">
        <div class="text-container">
          <p>初中英语</p>
        </div>
        <div class="text-container">
          <p>小学语文</p>
        </div>
        <div class="text-container">
          <p>六年级数学</p>
        </div>
        <div class="text-container">
          <p>六年级英语</p>
        </div>
        <div class="text-container">
          <p>高三数学</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputVal: ''
      }
    },
    methods: {
      back(){
        this.$router.go(-1)
      },
      search(){
      }
    }
  }
</script>

<style scoped>
  .search {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: #F5F5F5;
  }

  .search .top {
    display: flex;
    align-items: center;
    background: #06cd56;
    padding: 15px 0;
    margin-bottom: 15px;
  }

  .search .top .input-container {
    flex: 1;
    text-align: center;
  }

  .search .top .input-container .search-input {
    width: 90%;
    height: 35px;
    border: 0 none;
    border-radius: 20px;
    outline: 0 none;
  }

  .search .top .text {
    flex: 0 0 50px;
    color: #fff;
  }
  .search .content .hot-search {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
  }

  .search .content .hot-search .text-container {
    flex: 0 0 33.33%;
    padding: 5px 5px;
    margin-bottom: 10px;
  }

  .search .content .hot-search p {
    display: inline;
    background: #fff;
    padding: 5px 5px;
  }
</style>
